<template>
  <div :class="fullScreenStatus ? 'map-wrap-full' : 'map-wrap'"
       :style="'width:' + mapWidth + '; height:' + mapHeight">
    <div id="eden-map"
         :class="fullScreenStatus ? 'map-full' : ''"></div>
    <!-- <v-options :map="map" v-show="options" :prePolygonArr="prePolygon" @fullScreen="fullScreen" :fullStatus="fullScreenStatus" @showMarker="changeShowMarker" :vMarkerClustererStatus="vMarkerClustererStatus" @updateData="updateDatas"></v-options> -->
  </div>
</template>
<script>
import AMap from 'AMap'
import vOptions from './options'
import SHOP_PNG from './icon/shop.png'
import HYDRANT_PNG from './icon/hydrant.png'
import FIRE_DETACH_PNG from './icon/fireDetachment.png'
import MEDICAL_PNG from './icon/medical.png'
import MINI_FIRESTATION_PNG from './icon/miniFireStation.png'
// import points from './points'
export default {
  mounted() {
    this.mapInit()
  },
  components: {
    vOptions
  },
  data() {
    return {
      map: '',
      fullScreenStatus: false,
      MarkerClustererMarker: '',
      vMarkerClustererMarkers: [],
      vMarkerClustererStatus: true
    }
  },
  props: ['mapWidth', 'mapHeight', 'options', 'prePolygon', 'points'],
  watch: {
    points: function(val) {
      if (val.length > 0) {
        const _this = this
        for (let i = 0; i < val.length; i++) {
          let iconSrc = SHOP_PNG
          if (val[i].shopPlace == 11) {
            iconSrc = HYDRANT_PNG
          } else if (val[i].shopPlace == 12) {
            iconSrc = MINI_FIRESTATION_PNG
          } else if (val[i].shopPlace == 13) {
            iconSrc = MEDICAL_PNG
          } else if (val[i].shopPlace == 14) {
            iconSrc = FIRE_DETACH_PNG
          }
          let marker = new AMap.Marker({
            position: new AMap.LngLat(val[i].lng, val[i].lat),
            icon: new AMap.Icon({
              image: iconSrc,
              size: new AMap.Size(32, 32), //图标大小
              imageSize: new AMap.Size(32, 32)
            }),
            // content:
            //   '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
            offset: new AMap.Pixel(-15, -15),
            extData: i
          })
          var infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(0, -12)
          })

          marker.content = i
          marker.on('click', markerClick)
          function markerClick(e) {
            //构建信息窗体中显示的内容
            var index = e.target.content
            var shop = val[index]
            var info = []
            info.push(
              `<div><h4 style='color:#25a5f7;line-height:20px;margin:0'>${shop.shopName}</h4> `
            )
            info.push(
              `<p style='line-height:20px;margin:0'>设备数 : ${shop.devCount}</p>`
            )
            info.push(
              `<p style='line-height:20px;margin:0'>报警数 : ${shop.alarmCount}</p>`
            )
            info.push(
              `<p style='line-height:20px;margin:0'>地址 :${shop.addr}</p></div>`
            )
            infoWindow.setContent(info.join(''))
            infoWindow.open(_this.map, e.target.getPosition())
          }
          // 自定义点标记内容
          // var markerContent = document.createElement("div");
          //     // 点标记中的文本
          // var markerSpan = document.createElement("span");
          // markerSpan.className = 'marker';
          // markerSpan.innerHTML = "Hi，我被更新啦！";
          // markerContent.appendChild(markerSpan);

          // marker.setContent(markerContent); //更新点标记内容
          _this.vMarkerClustererMarkers.push(marker)
        }
        AMap.plugin(['AMap.ToolBar', 'AMap.MarkerClusterer'])
        //  AMap.plugin(["AMap.ToolBar", "AMap.MouseTool", "AMap.MarkerClusterer"]);
        _this.map.addControl(new AMap.ToolBar())
        // _this.map.addControl(new AMap.MouseTool());
        _this.map.addControl(
          (_this.MarkerClustererMarker = new AMap.MarkerClusterer(
            _this.map,
            _this.vMarkerClustererMarkers,
            { gridSize: 80 }
          ))
        )
        _this.map.setFitView()
      }
    }
  },
  methods: {
    updateDatas(data) {
      this.$emit('sendData', data)
    },
    mapInit() {
      this.map = new AMap.Map('eden-map', {
        resizeEnable: true,
        center: [105, 34],
        zoom: 5,
        mapStyle: 'amap://styles/fresh'
      })
    },
    fullScreen() {
      this.fullScreenStatus = !this.fullScreenStatus
    },
    changeShowMarker() {
      this.vMarkerClustererStatus = !this.vMarkerClustererStatus
      const edenMap = document.getElementById('eden-map')
      const markers = edenMap.getElementsByClassName('amap-markers')[0]
      if (this.vMarkerClustererStatus) {
        markers.style.display = 'block'
        const _this = this
        _this.MarkerClustererMarker = new AMap.MarkerClusterer(
          _this.map,
          _this.vMarkerClustererMarkers,
          { gridSize: 80 }
        )
      } else {
        markers.style.display = 'none'
        this.MarkerClustererMarker.clearMarkers()
      }
    },
    locateMarker(lng, lat) {
      this.map.setZoomAndCenter(17, [lng, lat])
      // let markers = this.map.getAllOverlays("marker");
      // for (let i = 0; i < markers.length; i++) {
      //   console.log(markers[i].getExtData())

      // }
    }
  }
}
</script>
<style scoped>
.map-wrap {
  width: 100%;
  height: 200px;
  position: fixed;
  top: 52px;
  z-index: 2020;
}
.map-wrap-full {
  position: fixed;
  width: 100% !important;
  height: 100% !important;
  z-index: 2020;
  top: 0;
  left: 0;
}
.map-full {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.map-wrap #eden-map {
  width: 100%;
  height: 100%;
}
.map-operator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
  height: 85px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.map-operator > div {
  position: relative;
  width: 52px;
  height: 52px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50px;
  cursor: pointer;
}
.map-operator .drawing {
  background-image: url('icon/draw.png');
  color: #fe6579;
}
.map-operator .submit {
  background-image: url('icon/submit.png');
  color: #a9ea0a;
}
.map-operator .clear {
  background-image: url('icon/clear.png');
  color: #b8c5cd;
}

.map-operator > div > div {
  position: absolute;
  width: 52px;
  height: 22px;
  line-height: 22px;
  left: 0;
  bottom: -22px;
  font-size: 14px;
}
.marker {
  position: absolute;
  top: -20px;
  right: -118px;
  color: #fff;
  padding: 4px 10px;
  box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2);
  white-space: nowrap;
  font-size: 12px;
  font-family: '';
  background-color: #25a5f7;
  border-radius: 3px;
}
</style>
